<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <%@ include file="/common/plateform/common-js.jsp"%>
  <%@ include file="/common/plateform/common-css.jsp"%>
  <title>标签表单属性设置</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<!-- 以下是body主体内容的模块区域 -->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- top start -->
  <%@include file="/common/plateform/top.jsp" %>
  <!-- top end -->
  <!-- left start -->
  <%@include file="/common/plateform/left.jsp" %>
  <!-- left end-->

  <div class="content-wrapper">
    <!-- Main start -->
	<section class="content">
	
	<form id="searchForm" class="form-horizontal">
		<input type="hidden" name="doCode" value="dymicSql"/>
		<input type="hidden" name="pageName" value="sysTemplateInfo-list">
		<input type="hidden" name="formName" value="searchForm">
		<input type="hidden" name="orderBy" value="sysTemplateInfo.tab_no">
		<input type="hidden" name="sysTemplateInfo.w_cateNo" value="${param.cateNo}">
		<input type="hidden" name="sysTemplateInfo.w_templateId" value="${param.templateId}">
		<input type="hidden" name="sysTemplateInfo.w_delStatus" value="F">
  	</form>
  		
  	<div class="row">
      	<div class="box-header with-border pull-right">
      	<!-- 
			<button type="button" class="btn btn-danger btn-lg" onclick="submitDetail(','objcolum<?=i?>');"><i class="fa fa-flag-o"></i> 生成页面 </button>
			 -->
       	</div>
  	</div>
  	
     <div class="row" id="dataList-body">
      
     </div>
    </div>
  </section>
    <!-- Main end -->
  </div>
  <!-- /.content-wrapper -->
  <!-- foot start -->
  <%@include file="/common/plateform/foot.jsp" %>
  <!-- foot start -->

<div win-title="字段选择窗口" class="modal fade" id="my_modal_colum_checkbox" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="margin-top:10px; width:900px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							×
						</button>
						<h4 class="modal-title">
							<font color="red">字段选择器[<span id="columbox_table_name"></span>表]</font> 
						</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" >
					        <div class="box-body">
					           
					            <div class="tab-content form-group" id="tabs_checkbox_content">
					               
					            </div>
					           
					        </div>
			                <div class="box-footer">
				                <button type="button" class="btn btn-danger  pull-left" onclick="checkObjColumStr();">选择完成</button>
				                <span class="pull-left">&nbsp;<input type="checkbox" id="all-checks" onclick="xzcolumall(this)"/>全部选中</span>
				                <button type="button" class="btn btn-success pull-right" onclick="cannel('colum_checkbox');">关闭</button>
				            </div>
						</form>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>		
</div>

</body>

<!-- 以下是template列表模板的模块区域 -->
<script type="text/template" id="dataList-template">
		<? for ( var i = 0; i < rows.length; i++) {?>
		<?if(rows.length>1){?>
			<?if(i==rows.length-1 && ((i-1)%2!=0)){?>
				<div class="col-xs-12" style="height:380px;min-height:380px;">
			<?}else{?>
				<div class="col-xs-6" style="height:380px;min-height:380px;">
			<?}?>
		<?}else{?>
			<div class="col-xs-12" style="height:380px;min-height:380px;">
		<?}?>
		<form id="submitDetailForm_<?=i?>" class="form-horizontal">
			<input type="hidden" name="doCode" value="dymicSql"/>
			<input type="hidden" name="modelTypes" value="u_sysTemplateInfo">
			<input type="hidden" name="sysTemplateInfo.w_templateDetailId" value="<?=rows[i].templateDetailId?>" />
	
          <div class="box box-success box-body">
	          <div class="box-header with-border">
                 <h4><i class="fa fa-cog"></i> 属性设置 - <span class='fx12'><?=rows[i].tabNo ?>.<?=rows[i].tabName?><span> </h4>
				
					
              </div>
              <div class="box-body form-horizontal">
              
	                <div class="form-group">
	                  <label class="col-sm-3 control-label" >序号</label>
	                  <div class="col-sm-9">
							<input type="text" data-name="sysTemplateInfo.tabNo" name="sysTemplateInfo.tabNo" class="form-control" value="<?=rows[i].tabNo ?>" readonly="readonly"/>
	                  </div>
	                </div>

	                <div class="form-group">
	                  <label class="col-sm-3 control-label" >标签名称</label>
	                  <div class="col-sm-9">
						<input type="text" data-name="sysTemplateInfo.tabName" value="<?=rows[i].tabName ?>" name="sysTemplateInfo.tabName" class="form-control" readonly="readonly"/>
	                  </div>
	                </div>

	                <div class="form-group">
		                  <label class="col-sm-3 control-label" >表单内容</label>
		                  <div class="col-sm-9">
							<? var objs = rows[i].objName.split(",")?>
							<?for(var j =0;j<objs.length;j++){ ?>
									<?var objName = objs[j]?>
		                  			<button type="button" style="margin-top:5px;" class="btn btn-success btn-sm objcolum<?=i?>" colum=""  onclick="addTabObjColum(this,'tabContent_<?=i?>','<?=objName?>');"><i class="fa fa-plus-circle"></i> <?=objName?>属性设置</button>&nbsp;
							<?}?>
		                  </div>
			        </div>
					<div class="form-group col-sm-12" style="display:none;">
						<textarea rows="4" cols="20"  id="tabContent_<?=i?>" name="sysTemplateInfo.tabContent"  class="form-control"><?=rows[i].tabContent?></textarea>
			        </div>

					<div class="form-group col-sm-12 text-center">
						<button type="button" class="btn btn-warning btn-lg" onclick="submitDetail('submitDetailForm_<?=i?>','<?=rows[i].tabName?>	','tabContent_<?=i?>','objcolum<?=i?>');"><i class="fa fa-cog"></i> 保存设置 </button>
	                </div>
				
		        </div>
            </div>
        </div>
	</form>
   <?}?>  		
</script>

</html>

<!-- 以下是js模块区域 -->
<script>
var clickMenu = "template-list-instance";
var id,myPage,dataListId,searchFormId,isShowLog,tableSort,tableId;
myPage = 10;
dataListId = "dataList";
searchFormId = "searchForm";
tableSort = "sysTemplateInfo";
tableId = "templateDetailId";
isShowLog = true;


function getButton(objName){
	var objA = objName.split(",");
	for(var i=0;i<objA.length;i++){
		
	}
}

$(function () {
	//1、加载分页列表数据
	getTableData();
	//2、控制是否启用token
	//setToken();
	
	//请在下面补充其他初始化方法（如数据字典、页面加载数据等）
 });
var dateObject = $('.datepicker').datepicker( {
	language : 'zh-CN',
	//inline: true,
	todayBtn : "linked",
	format : "yyyy-mm-dd",
	autoclose: true
});
//读取（查询、编辑）数据
function toLoad(id,type){
	var paramLoadData = {"sysTemplateInfo.w_templateDetailId":id,"modelTypes":"s_"+tableSort};
	loadObj(type,paramLoadData);
}
function toDele(id){
	var index_submit = layer.confirm('您确定要删除信息吗？', {btn: ['Yes','No'],closeBtn: 0,offset: '220px'}
	, function(){
		layer.close(index_submit);
		var paramLoadData = {"modelTypes":"d_sysTemplateInfo","sysTemplateInfo.w_templateDetailId":id};
		//var paramLoadData = {"modelTypes":"u_sysTemplateInfo","sysTemplateInfo.delStatus":"T","sysTemplateInfo.w_templateDetailId":id};
		doDele(paramLoadData);
	});
}
//反显数据
function showData(type,myData){
	console.log(myData);
	if("view"==type){
		FormUtil.loadView("", myData);
		$("#my_modal_view").modal("show");
	}else if("edit"==type){
		//FormUtil.fillData("#editForm", myData,"id");
		cleanData('submitFormData_edit');//情况模态窗口内数据
		FormUtil.loadView("sysTemplateInfo", myData);
		$("#w_"+tableId).val(myData.templateDetailId);
		$("#my_modal_edit").modal("show");
	}
}

$(function () {
	$('#'+dataListId+' tbody').on('click','tr', function (e) {
	     if ( $(this).hasClass('selected') ) {
	            //$(this).removeClass('selected');
	        }
	        else {
	            $('tr.selected').removeClass('selected');
	            $(this).addClass('selected');
	        }
	     id = $('tr.selected td').eq(0).html();
	   //  console.log($('tr.selected td').eq(1).html())
	} );
	
	
  });
//加载列表数据
function getTableData(){
	deleteAllRow(dataListId);
	$.ajax({
		   type:'get',
		   url:common_list_url,
		   data:$("#"+searchFormId).serialize()+getCurrentPage(common_list_url+"?"+$("#"+searchFormId).serialize(),myPage),
		   dataType:'json',
		   success: function(myData){
		   if(isShowLog)console.log(myData);
			var data = baidu.template(dataListId+"-template",eval(myData));  
			$("#"+dataListId+"-body").html(data);
			  var option= {
					   ele:$("#"+dataListId+"-page")[0],
					   total:myData.total,
					   fn:getTableData,
					   url:common_list_url+"?"+$("#"+searchFormId).serialize()
				   }
				generatePages(option);
		   }
		});	
  }

//设置模态框隐藏事件 
$( '#my_modal_add' ).on( 'show.bs.modal' ,function(e){  
	$.ajax({
	    type:'get',
	    url:'/sendPage/token?token=true',
	    dataType:'json',
	    success: function(myData){
	    	if(isShowLog)console.log(myData);
			 $('#formToken').val(myData);
	  	}
	});	
}); 
//清空数据
function cleanData(id){
	$('#'+id).find(".clean").val("");//按照样式清空；
}
//打开添加页面
function toAdd(){
	cleanData('submitFormData');//情况模态窗口内数据
	$("#w_"+tableId).val("");
	$(".datepicker").val("");
	$('#my_modal_add').modal('show');
}

//获取对象值
function loadObj(type,paramData){
	$.ajax({
	    type:'get',
	   	url:common_info_url+"?doCode=dymicSql",
	    data: paramData,
	    async:false,
	    dataType:"json",
	    success: function(myData){
	    	showData(type,myData);
	  	}
	});	
}

//删除信息（逻辑删除）
function doDele(paramData){
	$.ajax({
	    type:"post",
	    url:common_submit_url+"?doCode=dymicSql",
	    data: paramData,
	    dataType:"json",
	    success: function(myData){
	    	var result = myData.flag;
	    	if(result=="T"){
	    		layer.alert("删除操作成功");
	    		refresh();
	    	}
	  	}
	});	
}

/**
 * 表单数据提交
 * @param formId
 */
function add(formId){
	var index_submit = layer.confirm('您确定要提交信息吗？', {btn: ['Yes','No'],closeBtn: 0,offset: '220px'}
	, function(){
		layer.close(index_submit);
		$.ajax({
		    type:"post",
		    url:common_submit_url,
		    data:$("#"+formId).serialize(),
		    dataType:"json",
		    success: function(myData){
		    	//console.log(myData);
		    	if(myData.flag=="T"){
		    		layer.alert("数据保存成功");
		    		$("#my_modal_add").modal("hide");
		    	}else{
		    		layer.alert(myData.msg);
		    	}
		    	refresh();
		  	}
		});	
	});
}

/**
 * 表单数据提交
 * @param formId
 */
function edit(formId){
	var index_submit = layer.confirm('您确定要提交信息吗？', {btn: ['Yes','No'],closeBtn: 0,offset: '220px'}
	, function(){
		layer.close(index_submit);
		$.ajax({
		    type:"post",
		    url:common_submit_url,
		    data:$("#"+formId).serialize(),
		    dataType:"json",
		    success: function(myData){
		    	//console.log(myData);
		    	if(myData.flag=="T"){
		    		layer.alert("数据保存成功");
		    		$("#my_modal_edit").modal("hide");
		    	}else{
		    		layer.alert(myData.msg);
		    	}
		    	refresh();
		  	}
		});	
	});
}

//关闭win
function cannel(type){
	if(strUtil.isNull(type)){
		$('#my_modal_add').modal('hide');
	}else{
		$('#my_modal_'+type).modal('hide');
	}
}

function refresh(){
	getTableData();
}


function setToken(){
	$.ajax({
	    type:'get',
	    url:'/sendPage/token?token=true',
	    dataType:'text',
	    success: function(myData){
	    	console.log(myData);
			 $('#formToken').val(myData);
	  	}
	});	
}

//点击button按钮加载指定表中的字段
var objCol = "";
function addTabObjColum(ob,tabContentId,objName){
	objCol = $(ob);
	$("#all-checks").prop('checked',false);
	var index_load = layer.msg("数据正在加载中。。。", {shade: false,offset: '220px'});
	var tabTitleHtml = "",tabContentHtml="";
	var tabTobj = $("#tabs_checkbox");
	var tabTobjContent = $("#tabs_checkbox_content");
	
	var defColumVal = objCol.attr("colum");
	if(!defColumVal){
		defColumVal = $("#"+tabContentId).val();
	}
	
	$.ajax({
	    type:'get',
	   	url:common_list_url,
	    data: {"doCode":"dymicSql","modelTypes":"s_sortInfo,s_metadata","sortInfo.sortId":"[metadata.sortId]","sortInfo.w_objName":objName,"metadata.w_ifAdd":"T"},
	    async:false,
	    dataType:"json",
	    success: function(myData){
	    	for(var i=0;i<myData.rows.length;i++){
	    		var obj = myData.rows[i].metadata;
	    		var valStr = objName+"."+obj.dataAttr;
	    		tabContentHtml += "<span title='"+valStr+"' class='col-sm-4 span-c'><input name='objnamecloumcheckbox' value='"+valStr+"' type='checkbox' /> "+obj.dataFullName+"</span>";
	    	}
			tabTobjContent.html(tabContentHtml);
			layer.close(index_load);
			
			if(defColumVal){
				DictUtil.checkCheckboxDict("objnamecloumcheckbox", defColumVal.split(","));
			}
			$("#my_modal_colum_checkbox").modal("show");
			$("#columbox_table_name").text(objName);
	  	}
	});
}
//保存选中的字段
function checkObjColumStr(){
	var objColumStr = "";
	$("input[name='objnamecloumcheckbox']:checked").each(function(){
		objColumStr +=$(this).val()+",";
	});
	objColumStr=objColumStr.substring(0,objColumStr.length-1);
	if(strUtil.isNull(objColumStr)){
		layer.alert("未选中字段");
		return;
	}
	objCol.attr("colum",objColumStr);
	$("#my_modal_colum_checkbox").modal("hide");
}
//全选/反选
function xzcolumall(t){
	var obj = $(t);
	$("input[type='checkbox'][name='objnamecloumcheckbox']").prop('checked',obj.is(':checked'));
}
//保存提交属性设置表单
function submitDetail(formId,title,tabContentId,btnClass){
	//alert(tabContentId+"-"+btnClass);
	var objColStr = "";
	$("."+btnClass).each(function(){
		objColStr += $(this).attr("colum")+",";
	});
	objColStr=objColStr.substring(0,objColStr.length-1);
	$("#"+tabContentId).val(objColStr);
	
	var index_submit = layer.confirm('您确定要保存['+title+']设置吗？', {btn: ['Yes','No'],closeBtn: 0,offset: '220px'}
	, function(){
		layer.close(index_submit);
		$.ajax({
		    type:"post",
		    url:common_submit_url,
		    data:$("#"+formId).serialize(),
		    dataType:"json",
		    success: function(myData){
		    	//console.log(myData);
		    	if(myData.flag=="T"){
		    		layer.alert("数据保存成功");
		    		$("#my_modal_edit").modal("hide");
		    	}else{
		    		layer.alert(myData.msg);
		    	}
		    	refresh();
		  	}
		});	
	});
}
</script>



